<template>
	<view>
		<view class="comfirm-info-container" @tap="closeEllipsisTip" v-if="hasAuth">
			<view class="err-msg" v-if="detailInfo.identityNumberErrorMessage">
				<commonIcon :size="32" type="icon-tishi" class="error-icon" />
				<text>{{ detailInfo.identityNumberErrorMessage }}</text>
			</view>
			<scroll-view class="scroll-view" scroll-y scroll-with-animation enable-flex @scroll="close">
				<view class="title">
					<commonIcon class="title-icon" type="icon-zhengjianxinxi" :size="36" />
					<text class="title-content">证件信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="info-label">姓名</view>
						<view class="info-content">{{ detailInfo.name }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">性别</view>
						<view class="info-content">{{ detailInfo.sexData }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">民族</view>
						<view class="info-content">{{ detailInfo.nation }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">证件号</view>
						<view :class="'info-content ' + (detailInfo.identityNumberErrorMessage ? 'error' : '')">{{ detailInfo.identityNumber }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">发证机关</view>
						<view class="info-content ellipsis-tip" @tap="openTips" :data-index="0" :data-content="detailInfo.identityOrg">{{ detailInfo.identityOrgData }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">出生日期</view>
						<view class="info-content">{{ detailInfo.birthdayData }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">详细地址</view>
						<view class="info-content ellipsis-tip" @tap="openTips" :data-index="1" :data-content="detailInfo.address">{{ detailInfo.addressData }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">有效期</view>
						<view class="info-content">{{ detailInfo.issuedAtData }}-{{ detailInfo.expiredAtData }}</view>
					</view>
					<view class="vertical-item">
						<view class="vertical-label">身份证正反面</view>
						<view class="vertical-content">
							<view class="pic-list">
								<preview-image
									class="pic-container"
									:avatar="detailInfo.identityFrontPhotoData"
									:imageList="[detailInfo.identityFrontPhotoData, detailInfo.identityBackPhotoData]"
									previewClass="pic"
								></preview-image>
								<preview-image
									class="pic-container"
									:avatar="detailInfo.identityBackPhotoData"
									:imageList="[detailInfo.identityFrontPhotoData, detailInfo.identityBackPhotoData]"
									previewClass="pic"
								></preview-image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="common-btns-container" v-if="!detailInfo.identityNumberErrorMessage">
				<view class="common-btn-container" @tap="toAddRoster" hover-class="common-btn">下一步</view>
			</view>
		</view>
		<ellipsis-tip ref="ellipsisTip" :content="tipContent"></ellipsis-tip>
	</view>
</template>

<script>
import commonIcon from '@/pagesA/components/common/icon/icon';
import previewImage from '@/pagesA/components/common/preview-image/preview-image';
import ellipsisTip from '@/pagesA/components/common/ellipsis-tip/ellipsis-tip';
import { common } from '@/pagesA/utils/common.js';
import moment from 'moment';
const app = getApp();
export default {
	components: {
		commonIcon,
		previewImage,
		ellipsisTip
	},
	data() {
		return {
			limit: 15,
			detailInfo: {
				identityNumberErrorMessage: '',
				name: '',
				sexData: '',
				nation: '',
				identityNumber: '',
				identityOrg: '',
				identityOrgData: '',
				birthdayData: '',
				address: '',
				addressData: '',
				issuedAtData: '',
				expiredAtData: '',
				identityFrontPhoto: '',
				identityBackPhoto: ''
			},
			tipContent: '',
			hasAuth: true
		};
	},
	onLoad() {
		if (uni.getStorageSync('hasDistinguishInfo')) {
			let detailInfo = uni.getStorageSync('distinguishInfo');
			detailInfo.sexData = this.handlSex(detailInfo.sex);
			detailInfo.birthdayData = this.handlTime(detailInfo.birthday, 'YYYY/MM/DD');
			detailInfo.issuedAtData = this.handlTime(detailInfo.issuedAt, 'YYYY.MM.DD');
			detailInfo.expiredAtData = this.handlTime(detailInfo.expiredAt, 'YYYY.MM.DD');
			detailInfo.identityOrgData = this.handleContent(detailInfo.identityOrg);
			detailInfo.addressData = this.handleContent(detailInfo.address);
			detailInfo.certificateList = detailInfo.certificateList || [];
			detailInfo.personType = detailInfo.personType || {
				code: '20',
				value: '建筑工人'
			};
			detailInfo.identityFrontPhotoData = common.commonMethods.imgShow(detailInfo.identityFrontPhoto);
			detailInfo.identityBackPhotoData = common.commonMethods.imgShow(detailInfo.identityBackPhoto);
			detailInfo.avatarData = common.commonMethods.imgShow(detailInfo.avatar);
			//特殊处理，该系统因为新增人员的时候没有组织机构，去除职位字段内容
			detailInfo.station = null;
			this.detailInfo = detailInfo;
			uni.removeStorageSync('hasDistinguishInfo');
			uni.removeStorageSync('distinguishInfo');
		} else {
			common.message.toast('未获取到识别信息');
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	onShow() {},
	methods: {
		handlSex(value) {
			if (value == 0) {
				return '男';
			} else if (value == 1) {
				return '女';
			}
			return;
		},

		handlTime(value, format) {
			return value ? moment(value).format(format) : '';
		},

		handleContent(value) {
			if (value && value.length > this.limit) {
				value = value.substr(0, this.limit) + '...';
			}
			return value;
		},

		openTips(e) {
			const index = e.currentTarget.dataset.index;
			const tipContent = e.currentTarget.dataset.content;
			if (tipContent && tipContent.length <= this.limit) {
				return;
			}
			this.tipContent = tipContent;
			uni.createSelectorQuery()
				.in(this)
				.selectAll('.ellipsis-tip')
				.boundingClientRect((rects) => {
					this.$refs.ellipsisTip.openTips(rects[index].top);
				})
				.exec();
		},

		close() {
			this.$refs.ellipsisTip.closeTip();
		},

		closeEllipsisTip(e) {
			let content = e.target.dataset.content;
			if (!content) {
				//点击非省略组件，关闭
				this.close();
			}
		},
		toAddRoster() {
			let currentProject = uni.getStorageSync('cisdiCurrentProject');
			app.globalData.hasDetailInfo = true;
			app.globalData.detailInfo = this.detailInfo;
			uni.navigateTo({
				url: '/pagesA/pages/projectInfo/addRoster/addRoster?projectUuid=' + currentProject?.projectUuid + '&isRegister=true'
			});
		}
	}
};
</script>
<style>
@import url('../../../../assets/style/common.css');
.comfirm-info-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f6f7fa;
}

.err-msg {
	background: #ffeeee;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #ff555c;
	padding: 8rpx 30rpx;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	text-align: justify;
}

.error-icon {
	margin-right: 16rpx;
	margin-top: 6rpx;
}

.scroll-view {
	flex: 1;
	height: 0;
}

.title {
	padding: 16rpx 32rpx;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}

.title .title-icon {
	margin-right: 12rpx;
	width: 36rpx;
	height: 36rpx;
}

.info-list {
	padding: 0 32rpx;
	background-color: #fff;
}

.info-list .info-item,
.info-list .vertical-item {
	border-bottom: 1rpx solid #e1e2e7;
	padding: 28rpx 0;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}

.info-list .info-item {
	display: flex;
	align-items: center;
}

.info-list .info-item:last-child,
.info-list .vertical-item:last-child {
	border-bottom: 0;
}

.info-item .info-label,
.vertical-item .vertical-label {
	color: #4b5680;
	margin-right: 32rpx;
	flex-shrink: 0;
}

.info-item .info-content {
	margin-left: auto;
	flex: 1;
	color: #1e253f;
	text-align: right;
}

.info-item .error {
	color: #ff555c;
}

.ellipsis-content {
	margin-left: auto;
}

.vertical-item .vertical-content {
	padding-top: 24rpx;
}

.vertical-content .pic-list {
	display: flex;
	align-items: center;
}

.pic-list .pic-container {
	width: 162rpx;
	height: 162rpx;
	margin-right: 24rpx;
	border-radius: 6rpx;
}

.pic-list .pic {
	width: 158rpx;
	height: 158rpx;
	border-radius: 6rpx;
	border: 1rpx solid #edeff7;
}
</style>
